<template>
  <el-select
    ref="hmselect"
    v-model="modelValue"
    v-bind="$attrs"
    :placeholder="placeholder"
    v-on="$listeners"
    :filterable="filterable"
  >
    <el-option v-if="showAll" :value="null" label="全部" />
    <el-option
      v-for="(item, index) in list"
      :key="index"
      :label="formatLabel(item[valueField], item[labelField])"
      :value="item[valueField]"
    />
  </el-select>
</template>

<script>
export default {
  name: 'HmSelect',
  /**
   * event 事件
   * 支持 el-select 的所有事件
   */
  props: {
    filterable: {
      type: Boolean,
      default: false
    },
    // 门店名称/编号
    value: {
      type: [String, Number, Array],
      default: null,
    },
    // 是否展示value字段 as: value-label
    showValue: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    // label 字段名
    labelField: {
      type: String,
      default: 'label',
    },
    // value 字段名
    valueField: {
      type: String,
      default: 'value',
    },
    // 是否显示全部 默认展示
    showAll: {
      type: Boolean,
      default: true,
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  computed: {
    modelValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  methods: {
    formatLabel(value, name) {
      if (this.showValue) return value + ' - ' + name
      else return name
    },
    focus() {
      this.$refs.hmselect.focus()
    }
  },
}
</script>
